<template>
  <div>
    <ComDialog
      :title="this.editForm.idStr ? '修改拨比' : '添加拨比'"
      :dialogVisible="dialogVisible"
      @EventClose="closeFn"
    >
      <el-form
        :model="editForm"
        :rules="rules"
        ref="addForm"
        label-width="130px"
        class="demo-editForm"
      >
        <el-form-item prop="type" :label="'类型'">
          <el-select v-model="editForm.type">
            <el-option
              v-for="(item, index) in typeList"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="角色" prop="postionId">
          <el-select v-model="editForm.postionId">
            <el-option
              v-for="(item, index) in roleList"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <template>
          <el-form-item label="拨比方式" prop="commisionType">
            <el-select v-model="editForm.commisionType">
              <el-option
                v-for="(item, index) in levelOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </template>

        <el-form-item label="拨比/分钟（元）" prop="commision">
          <el-input
            style="width: 220px"
            placeholder="请输入金额"
            v-model.number="editForm.commision"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button @click="closeFn">取消</el-button>
          <el-button
            type="primary"
            v-hasPermi="['financial:commision:edit']"
            @click="saveFn"
            >保存</el-button
          >
        </el-form-item>
      </el-form>
    </ComDialog>
  </div>
</template>
<script>
import ComDialog from "../../../components/comDialog.vue";
import { getPayCommisionetInfoApi } from "@/wss/api/financial/payCommision.js";
import { getPositionListApi } from "@/wss/api/HumanResources/roleSetting/index.js";

export default {
  props: {
    isImgText: {
      type: [String, Number],
      default: 1,
    },
    //  价格类型
    priceType: {
      type: String,
      default: "出错",
    },

    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  components: { ComDialog },
  data() {
    return {
      // 职位列表
      levelList: [],
      // 角色
      roleList: [],
      typeList: [
        { label: "充值", value: "1" },
        { label: "VIP", value: "2" },
      ],
      // 收费方式
      levelOptions: [
        { label: "按比例", value: "1" },
        { label: "按次数", value: "2" },
        { label: "按时长", value: "3" },
      ],
      editForm: {
        type: "",
        postionId: "",
        commisionType: "",
        commision: "",
      },
      rules: {
        commision: [
          {
            required: true,
            type: "number",
            message: "无效",
            trigger: "blur",
          },
        ],

        postionId: [{ required: true, trigger: "change", message: "无效" }],
        level: [{ required: true, trigger: "change", message: "无效" }],

        commisionType: [{ required: true, trigger: "change", message: "无效" }],

        consultType: [{ required: true, trigger: "change", message: "无效" }],
      },
    };
  },
  created() {
    this.getPositionGetInfoFn();
  },
  computed: {},
  methods: {
    // id获取详细
    async getDetailFn(row) {
      const { code, msg, data } = await getPayCommisionetInfoApi({
        id: row.idStr,
      });
      if (code == 200) {
        console.log(data);
        this.editForm = data;
        this.editForm.postionId = data.postionIdStr;
        console.log(this.editForm, "editForm");
      }
    },
    // 获取职位和角色列表获取
    async getPositionGetInfoFn() {
      let { rows, code } = await getPositionListApi();

      if (code == 200) {
        // 获取角色
        rows.forEach((item) => {
          this.roleList.push({ label: item.name, value: item.idStr });
        });
      }
    },

    // 修改的保存 按钮
    async saveFn() {
      try {
        this.$refs.addForm.validate();
        let paramsData = JSON.parse(JSON.stringify(this.editForm));
        paramsData.commision = paramsData.commision.toFixed(2);
        this.$emit("EventGetData", paramsData);
      } catch (error) {
        this.$modal.msgError("输入无效");
      }
    },
    // 关闭对话框
    async closeFn() {
      // 清空editForm
      (this.editForm = {
        positionId: "",

        level: "",
        // 比率方式
        commisionType: "",
        // 拨比金额
        commision: "",
        // 类目
        consultType: "",
        status: "",
      }),
        this.$refs.addForm.resetFields();

      // 关闭对话框 =>  重新获取列表数据 $emit返回该组件实例
      this.$emit("update:dialogVisible", false);
    },
  },
};
</script>